<template>
  <div class="tag">
    <fx-card title="基础用法">
      <fx-tag type="primary">标签一</fx-tag>
      <fx-tag type="success">标签二</fx-tag>
      <fx-tag type="warning">标签三</fx-tag>
      <fx-tag type="error">标签四</fx-tag>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="可移除">
      <fx-tag type="primary" closable>标签一</fx-tag>
      <fx-tag type="success" closable>标签二</fx-tag>
      <fx-tag type="warning" closable>标签三</fx-tag>
      <fx-tag type="error" closable>标签四</fx-tag>
      <template #hide>
        <pre v-highlight="clear"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="不同尺寸">
      <fx-tag type="primary" size="large">标签一</fx-tag>
      <fx-tag type="success" size="middle">标签二</fx-tag>
      <fx-tag type="warning" size="default">标签三</fx-tag>
      <fx-tag type="error" size="mini">标签四</fx-tag>
      <template #hide>
        <pre v-highlight="size"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="不同主题">
      <fx-row class="mt10">
        <fx-col>
          <fx-tag type="primary" theme="light">标签一</fx-tag>
          <fx-tag type="success" theme="light">标签二</fx-tag>
          <fx-tag type="warning" theme="light">标签三</fx-tag>
          <fx-tag type="error" theme="light">标签四</fx-tag>
        </fx-col>
      </fx-row>
      <fx-row class="mt10">
        <fx-col>
          <fx-tag type="primary" theme="plain">标签一</fx-tag>
          <fx-tag type="success" theme="plain">标签二</fx-tag>
          <fx-tag type="warning" theme="plain">标签三</fx-tag>
          <fx-tag type="error" theme="plain">标签四</fx-tag>
        </fx-col>
      </fx-row>
      <fx-row class="mt10">
        <fx-col>
          <fx-tag type="primary" theme="dark">标签一</fx-tag>
          <fx-tag type="success" theme="dark">标签二</fx-tag>
          <fx-tag type="warning" theme="dark">标签三</fx-tag>
          <fx-tag type="error" theme="dark">标签四</fx-tag>
        </fx-col>
      </fx-row>
      <template #hide>
        <pre v-highlight="theme"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="动态编辑">
      <fx-tag v-for="item in editTag" :key="item" closable @close="closeTagClick(item)">
        {{ item }}
      </fx-tag>
      <fx-input width="90" v-if="add" v-model="addInput" auto-focus @keydown.stop.enter="addTag"></fx-input>
      <fx-button v-else @click="add=true">+添加标签</fx-button>
      <template #hide>
        <pre v-highlight="edit"><code></code></pre>
      </template>
    </fx-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'

export default defineComponent({
  name: 'viewTag',
  setup () {
    const editTag = reactive<string[]>(['标签一', '标签二', '标签三', '标签四'])
    const addInput = ref<string>('')
    const add = ref<boolean>(false)

    const closeTagClick = (val: string) => {
      editTag.splice(editTag.indexOf(val), 1)
    }

    const addTag = () => {
      if (addInput.value === '') return
      editTag.push(addInput.value)
      addInput.value = ''
      add.value = false
    }

    const base = `<fx-tag type="primary">标签一</fx-tag>
<fx-tag type="success">标签二</fx-tag>
<fx-tag type="warning">标签三</fx-tag>
<fx-tag type="error">标签四</fx-tag>`
    const clear = `<fx-tag type="primary" closable>标签一</fx-tag>
<fx-tag type="success" closable>标签二</fx-tag>
<fx-tag type="warning" closable>标签三</fx-tag>
<fx-tag type="error" closable>标签四</fx-tag>`
    const size = `<fx-tag type="primary" size="large">标签一</fx-tag>
<fx-tag type="success" size="middle">标签二</fx-tag>
<fx-tag type="warning" size="default">标签三</fx-tag>
<fx-tag type="error" size="mini">标签四</fx-tag>`
    const theme = `<fx-row class="mt10">
  <fx-col>
    <fx-tag type="primary" theme="light">标签一</fx-tag>
    <fx-tag type="success" theme="light">标签二</fx-tag>
    <fx-tag type="warning" theme="light">标签三</fx-tag>
    <fx-tag type="error" theme="light">标签四</fx-tag>
  </fx-col>
</fx-row>
<fx-row class="mt10">
  <fx-col>
    <fx-tag type="primary" theme="plain">标签一</fx-tag>
    <fx-tag type="success" theme="plain">标签二</fx-tag>
    <fx-tag type="warning" theme="plain">标签三</fx-tag>
    <fx-tag type="error" theme="plain">标签四</fx-tag>
  </fx-col>
</fx-row>
<fx-row class="mt10">
  <fx-col>
    <fx-tag type="primary" theme="dark">标签一</fx-tag>
    <fx-tag type="success" theme="dark">标签二</fx-tag>
    <fx-tag type="warning" theme="dark">标签三</fx-tag>
    <fx-tag type="error" theme="dark">标签四</fx-tag>
  </fx-col>
</fx-row>`
    const edit = `<fx-tag v-for="item in editTag" :key="item" closable @close="closeTagClick(item)">
  {{ item }}
</fx-tag>
<fx-input width="90" v-if="add" v-model="addInput" auto-focus @keydown.stop.enter="addTag"></fx-input>
<fx-button v-else @click="add=true">+添加标签</fx-button>

export default defineComponent({
    setup() {
      const editTag = reactive<string[]>(['标签一', '标签二', '标签三', '标签四'])
      const addInput = ref<string>('')
      const add = ref<boolean>(false)

      const closeTagClick = (val: string) => {
        editTag.splice(editTag.indexOf(val), 1)
      }

      const addTag = () => {
        if (addInput.value === '') return
        editTag.push(addInput.value)
        addInput.value = ''
        add.value = false
      }
    }
})`

    return {
      editTag,
      add,
      addInput,
      base,
      clear,
      size,
      theme,
      edit,
      addTag,
      closeTagClick
    }
  }
})
</script>

<style scoped lang="scss">
.tag {
  .list {
    > li {
      margin-bottom: 20px;
    }
  }
}
</style>
